<%--
    Document   : agregarExtintor
    Created on : 14/11/2010, 11:36:35 PM
    Author     : Gustavo Pastorelli
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<% request.setAttribute("allowed", "Gestionar Sistemas de Extincion");%>
<%@ include file='../Templates/security.jsp' %>

<script type="text/javascript">
    $(function(){
        listaSedes();
    });

    var categoriaO = "";
    var sedeO = "";
    var edificioO ="";
    var id_pisoO= "";
    var ultima_sede = "";
    var ultima_edificio = "";
    var ultima_piso = "";
    var ultima_coordenadas = "";
    // <!-- Agregar esta linea lo necesario para llenar el formulario -->
    function llenarForm(){
        // Aqui se realiza la consulta a la BD (Cambia en todos los script)
        $.getJSON("modificarExtintor.do",{flag: "ida"},
        function(data) {
            $.each(data.modificarExtintorIda , function(i,item){
                // Aqui se van llenando los valores del formulario
                $("#id_nro_bien").val(item.id_nro_bien);
                //var categoriaS = "<option selected='selected' value='"+item.categoria+"' >"+item.categoria+"</option>";
                categoriaO = item.categoria;

                //setCategoria(categoriaO);
                $('#categoriaExtintor').empty();
                if (categoriaO == "Rociador"){
                    $('#categoriaExtintor').append("<option value='Extintor' >Extintor</option>");

                    $('#categoriaExtintor').append("<option value='Rociador' selected='selected' >Rociador</option>");

                    $('#categoriaExtintor').append("<option value='Hidrante' >Hidrante</option>");

                    $('#categoriaExtintor').append("<option value='Manguera' >Manguera</option>");
                }
                else if (categoriaO == "Extintor"){
                    $('#categoriaExtintor').append("<option value='Extintor' selected='selected' >Extintor</option>");

                    $('#categoriaExtintor').append("<option value='Rociador' >Rociador</option>");

                    $('#categoriaExtintor').append("<option value='Hidrante' >Hidrante</option>");

                    $('#categoriaExtintor').append("<option value='Manguera' >Manguera</option>");
                }else if (categoriaO == "Hidrante"){
                    $('#categoriaExtintor').append("<option value='Extintor' >Extintor</option>");

                    $('#categoriaExtintor').append("<option value='Rociador' >Rociador</option>");

                    $('#categoriaExtintor').append("<option value='Hidrante'selected='selected' >Hidrante</option>");

                    $('#categoriaExtintor').append("<option value='Manguera' >Manguera</option>");
                }else{
                    $('#categoriaExtintor').append("<option value='Extintor' >Extintor</option>");

                    $('#categoriaExtintor').append("<option value='Rociador' >Rociador</option>");

                    $('#categoriaExtintor').append("<option value='Hidrante' >Hidrante</option>");

                    $('#categoriaExtintor').append("<option value='Manguera' selected='selected'>Manguera</option>");
                }

                //$("#categoriaExtintor").append(categoriaS);
                var sedeS = "<option selected='selected' value='"+item.sede+"' >"+item.sede+"</option>";
                sedeO = item.sede;
                $("#Sedes").append(sedeS);
                var edificioS = "<option selected='selected' value='"+item.nombre_edificio+"' >"+item.nombre_edificio+"</option>";
                edificioO = item.nombre_edificio;
                $("#Edificios").append(edificioS);
                var id_pisoS = "<option selected='selected' value='"+item.id_piso+"' >"+item.id_piso+"</option>";
                id_pisoO = item.id_piso;
                $("#Pisos").append(id_pisoS);
                
                $("#tipo").val(item.tipo);
                $("#capacidad").val(item.capacidad);
                $("#fecha_ultima_recarga").val(item.fecha_ultima_recarga);
                $("#status").val(item.status);
                $("#persona_contacto").val(item.persona_contacto);
                $("#senalizado").val(item.senalizado);
                $("#usado").val(item.usado);
                $("#referencia").val(item.referencia);
                $("#coordIcon").val(item.coordenadas);
            });
            // (Cambia en todos los script)
            // Lo unico que cambia en esta parte es el llamado del método
        });
        return false;
    }

    llenarForm();
    
    // <!-- Agregar esta linea -->
    function setCategoria(categoriaO){
        alert("hola");
        $('#categoriaExtintor').empty();
        if (categoriaO == "Rociador"){
            $('#categoriaExtintor').append("<option value='Extintor' >Extintor</option>");

            $('#categoriaExtintor').append("<option value='Rociador' selected='selected' >Rociador</option>");

            $('#categoriaExtintor').append("<option value='Hidrante' >Hidrante</option>");

            $('#categoriaExtintor').append("<option value='Manguera' >Manguera</option>");
        }
        else if (categoriaO == "Extintor"){
            $('#categoriaExtintor').append("<option value='Extintor' selected='selected' >Extintor</option>");

            $('#categoriaExtintor').append("<option value='Rociador' >Rociador</option>");

            $('#categoriaExtintor').append("<option value='Hidrante' >Hidrante</option>");

            $('#categoriaExtintor').append("<option value='Manguera' >Manguera</option>");
        }else if (categoriaO == "Hidrante"){
            $('#categoriaExtintor').append("<option value='Extintor' >Extintor</option>");

            $('#categoriaExtintor').append("<option value='Rociador' >Rociador</option>");

            $('#categoriaExtintor').append("<option value='Hidrante'selected='selected' >Hidrante</option>");

            $('#categoriaExtintor').append("<option value='Manguera' >Manguera</option>");
        }else{
            $('#categoriaExtintor').append("<option value='Extintor' >Extintor</option>");

            $('#categoriaExtintor').append("<option value='Rociador' >Rociador</option>");

            $('#categoriaExtintor').append("<option value='Hidrante' >Hidrante</option>");

            $('#categoriaExtintor').append("<option value='Manguera' selected='selected'>Manguera</option>");
        }
    }
    

    // <!-- Agregar esta linea -->

    var edificio = false;
    var edificio_seleccionado = false;
    var sede = false;
    var sede_seleccionado = false;

    function selecionarSedes(value){
        ultima_sede = sede;
        sede = value;
        //        $('#Edificios').empty();
    }

    function selecionarEdificio(value){
        if (edificio != value){
            ultima_edificio = edificio;
            edificio = value;
            $('#Pisos').empty();
            $('#Pisos').val("");
        }
        /*    $.getJSON("listaEdificioAction.do",
        function(data) {
            if(sede_seleccionado!=sede){
                $('#Edificios').empty();
                $.each(data.Edificio, function(i,item){
                    if(sede == item.sede){
                        var string = "<option value='"+item.edificio+"' >"+item.edificio+"</option>";
                        $('#edificio').append(string);
                    }
                });
                sede_seleccionado=sede;
            }
        });*/
    }

    jquery
    function seleccionarPiso(){
        ultima_piso = id_pisoO;
        $.getJSON("listaPisoAction.do",
        function(data) {
            if(edificio_seleccionado!=edificio){
                $('#Pisos').empty();
                $.each(data.pisoEdificio, function(i,item){
                    if(edificio == item.edificio){
                        var string = "<option value='"+item.piso+"' >"+item.piso+"</option>";
                        $('#Pisos').append(string)
                    }
                });
                edificio_seleccionado=edificio;
            }
        });
    }

    // <!-- Agregar esta linea -->
    function cambiarSubmit(){
        $("#submit").val("submit");
    }

    

    function seleccionarCategoria(cat){
        if (cat == "Extintor"){
            $('#status').empty();
            $('#status').append("<option value='Cargado'>Cargado</option>");
            $('#status').append("<option value='Descargado'>Descargado</option>");
            $('#status').append("<option value='Nuevo'>Nuevo</option>");
            $('#status').append("<option value='Dañado'>Dañado</option>");
            $('#status').append("<option value='Operativo'>Operativo</option>");
            $('#status').append("<option value='En Mantenimiento'>En Mantenimiento</option>");
        }
        else{
            $('#status').empty();
            $('#status').append("<option value='Nuevo'>Nuevo</option>");
            $('#status').append("<option value='Dañado'>Dañado</option>");
            $('#status').append("<option value='Operativo'>Operativo</option>");
            $('#status').append("<option value='En Mantenimiento'>En Mantenimiento</option>");
        }
    }
</script>

<h1 class="title">Gestión del Sistema de Extinción</h1>
<hr>
<p class="meta"></p>
<div class="entry" id="formularioExintor">
    <center>
        <h2>Modificar Equipo</h2>
        <html:form action="/modificarExtintor" styleId="modificarExtintorForm" styleClass="formularioExtintor" onsubmit="return actualizarExtintor();">
            <div>
                <table>
                    <tbody>
                        <tr>
                            <td colspan="5" align="center">
                                <font color="red">
                                    <bean:write name="modificarExtintorForm" property="error"/>
                                    &nbsp;
                                </font>
                            </td>
                        </tr>
                        <!-- Agregar esta linea -->
                    <input  id="submit" type="hidden" name="submit" value ="">
                    <!-- Agregar esta linea -->
                    <tr>
                        <td><font color="red">*&nbsp;</font>Número de bien:</td>
                        <td><html:text styleId="id_nro_bien" readonly="true" property="id_nro_bien" maxlength="10"/>
                            <html:errors property = "ext_nro_bien"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Categoría :</td>
                        <td>
                            <html:select property="categoria" styleId="categoriaExtintor" onclick="seleccionarCategoria(value)">
                                <html:option value="Rociador">Rociador</html:option>
                                <html:option value="Extintor">Extintor</html:option>
                                <html:option value="Hidrante">Hidrante</html:option>
                                <html:option value="Manguera">Manguera</html:option>
                            </html:select>
                            <html:errors property = "ext_categoria"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Sedes:</td>
                        <td>
                            <select id="Sedes" name="sede" onclick="selecionarSedes(value)"></select>
                            <html:errors property = "ext_sede"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Edificio:</td>
                        <td>
                            <html:select styleId="Edificios" property="edificio"  onclick="selecionarEdificio(value)">
                                <script type="text/javascript">
                                    $.getJSON("listaEdificioAction.do",
                                    function(data) {
                                        $.each(data.Edificio, function(i,item){
                                            if (item.edificio != edificioO){
                                                var string = "<html:option value="+item.edificio+" >"+item.edificio+"</html:option>";
                                                $('#Edificios').append(string);
                                            }
                                        });
                                    });
                                </script>
                            </html:select>
                            <html:errors property = "ext_edificio"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Piso:</td>
                        <td>
                            <html:select  styleId="Pisos" property="piso" onclick="seleccionarPiso(value)">
                            </html:select>
                            <html:errors property = "ext_piso"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Tipo :</td>
                        <td><html:text styleId="tipo" property="tipo" maxlength="15"/><html:errors property = "ext_tipo"/></td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Capacidad :</td>
                        <td><html:text styleId="capacidad" property="capacidad" maxlength="15"/><html:errors property = "ext_capacidad"/></td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Fecha de la Última Recarga :</td>
                        <td><html:text styleId="fecha_ultima_recarga" property="fecha_ultima_recarga"/>
                            <html:errors property = "ext_fecha_ultimo"/></td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Estado :</td>
                        <td>
                            <html:select styleId="status" property="status">
                                <html:option value="Cargado">Cargado</html:option>
                                <html:option value="Descargado">Descargado</html:option>
                                <html:option value="Nuevo">Nuevo</html:option>
                                <html:option value="Dañado">Dañado</html:option>
                                <html:option value="Operativo">Operativo</html:option>
                                <html:option value="En Mantenimiento">En Mantenimiento</html:option>
                            </html:select>
                            <html:errors property = "ext_status"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Persona de Contacto:</td>
                        <td><html:text styleId="persona_contacto" property="persona_contacto" maxlength="30"/>
                            <html:errors property = "ext_persona_contacto"/></td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Señalizado :</td>
                        <td>
                            <html:select styleId="senalizado" property="senalizado">
                                <html:option value="si">Si</html:option>
                                <html:option value="no">No</html:option>
                            </html:select>
                            <html:errors property = "ext_senalizado"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Usado :</td>
                        <td>
                            <html:select styleId="usado" property="usado">
                                <html:option value="si">Si</html:option>
                                <html:option value="no">No</html:option>
                            </html:select>
                            <html:errors property = "ext_usado"/>
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">*&nbsp;</font>Referencia :</td>
                        <td><html:text styleId="referencia" property="referencia"/>
                            <html:errors property = "ext_referencia"/></td>
                    </tr>
                    <tr>
                        <td><input name="coordenadas" id="coordIcon" readonly="true"  maxlength="10" type="hidden" /></td>
                        <td><input name="ultima_sede" id="ultima_sede" readonly="true"  type="hidden" value="" /></td>
                        <td><input name="ultima_edificio" id="ultima_edificio" readonly="true"  type="hidden" value="" /></td>
                        <td><input name="ultima_piso" id="ultima_piso" readonly="true"  type="hidden" value="" /></td>
                        <td><input name="ultima_coordenadas" id="ultima_coordenadas" readonly="true"  type="hidden" value="" /></td>
                    </tr>
                    </tbody>
                </table>
                <br>
                <font color="red"><p>Los campos que tiene (*) son obligatorios.</p></font>
                <br>

                <script type="text/javascript">
                    $(document).ready(function() {
                        $("#fecha_ultima_recarga").datepicker({
                            dateFormat: 'dd/mm/yy',
                            maxDate: new Date(),
                            showOn: "button",
                            buttonImage: "style/images/calendar.gif",
                            buttonText: "calendario"
                        }).attr('readonly', true);
                    });
                </script>
            </div>
            <!-- Agregar esta linea: el onclick="cambiarSubmit()" -->
            <html:submit styleId="modificarExtintor_btn" styleClass="actionExtintor_btn" value="Modificar" onclick="cambiarSubmit()"/>
            <!-- Agregar esta linea -->
            <html:button property="" styleId="ubicarExtintor_btn" value="Ubicar"/>
            <html:button property="" styleId="extintores" value="Atrás"/>
            <div id="errorUbicacion"></div>
        </html:form>
    </center>
</div>
<div id="ubicacionPlano" style="display: none;">
    <div id="mapPisoMsg">Seleccione el lugar del plano donde se encuentra el extintor. Luego presione guardar.</div>
    <div id="mapPiso"></div>
    <center>
        <input type="button"  id="guardarExtintor_btn" value="  Guardar Ubicacion  "/>
        <input type="button"  id="atrasUbicacion_btn" value="  Atras  "/>
    </center>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">
    $('#Edificios').change(function(){
        edificio_seleccionado = $('#Edificios :selected').val();
        getPisos(edificio_seleccionado);
    });

    $('#ubicarExtintor_btn').click(function(){
        ed = $('#Edificios').val();
        ps = $('#Pisos').val();
        cat = $('#categoriaExtintor').val();
        if((ed.length == 0) || (ps.length == 0) || (cat.length == 0))
            $('#errorUbicacion').html("Ingrese primero la categoria, el edificio y piso donde se encuentra el equipo.");
        else {
            $('.formularioExtintor').css('display', 'none');
            $('#errorUbicacion').html("");
            loadPlanoExtintores(ed,ps,cat,true);
            $('#ubicacionPlano').css('display', 'block');
        }
    });
    $('#guardarExtintor_btn').click(function(){
        $('.actionExtintor_btn').css('display', 'block');
        $('#ubicacionPlano').css('display', 'none');
        $('.formularioExtintor').css('display', 'block');
    });
    $('#atrasUbicacion_btn').click(function(){
        $('.actionExtintor_btn').css('display', 'none');
        $('#ubicacionPlano').css('display', 'none');
        $('#errorUbicacion').html("");
        $('.formularioExtintor').css('display', 'block');
    });

    function getPisos(edificio){
        $.ajax({
            type: "GET",
            url: "getPisos.do?edificio="+edificio,
            dataType: 'json',
            success: processGetPisos
        });
        return false;
    }

    function processGetPisos(answer){
        $('#Pisos').empty();
        if(answer.pisos){
            $('#Pisos').empty();
            $.each(answer.pisos, function(index,value){
                if(value.id_piso == 0) piso = 'PB';
                else piso = value.id_piso;
                var string = "<option value='"+value.id_piso+"' ons>"+piso+"</option>";
                $('#Pisos').append(string);
            });
        }
    }
</script>
<script type="text/javascript" src="Modulo2/js/controlPiso.js" />
